h3 Connections

.list-group.list-group-flush.mt-3.mb-3
    ng-container(*ngFor='let group of childGroups') 
        .list-group-item.list-group-item-action.d-flex.align-items-center(
            (click)='groupCollapsed[group.name] = !groupCollapsed[group.name]'
        )
            .fa.fa-fw.fa-chevron-right(*ngIf='groupCollapsed[group.name]')
            .fa.fa-fw.fa-chevron-down(*ngIf='!groupCollapsed[group.name]')
            span.ml-3.mr-auto {{group.name || "Ungrouped"}}
            button.btn.btn-outline-info.ml-2((click)='editGroup(group)')
                i.fas.fa-edit
            button.btn.btn-outline-danger.ml-1((click)='deleteGroup(group)')
                i.fas.fa-trash
        ng-container(*ngIf='!groupCollapsed[group.name]')
            .list-group-item.list-group-item-action.pl-5.d-flex.align-items-center(
                *ngFor='let connection of group.connections',
                (click)='editConnection(connection)'
            )
                .mr-auto
                    div {{connection.name}}
                    .text-muted {{connection.host}}
                button.btn.btn-outline-danger.ml-1((click)='$event.stopPropagation(); deleteConnection(connection)')
                    i.fas.fa-trash
                    
button.btn.btn-primary((click)='createConnection()')
    i.fas.fa-fw.fa-plus
    span.ml-2 Add connection
